/** * Create by mzq * Description: 地图 * Date: 2024/9/11 14:23 * Update: 2024/9/11 14:23 */
<template>
  <div id="map" ref="chinaMap"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import china from '@/assets/json/china.json'
import { onMounted, ref } from 'vue'
import { getImageUrl } from '@/utils/index.js'
import { getRegionalInfo } from '@/api/index.js'
import { cityArr } from '@/public/city.js'

const myImage = ref()
myImage.value = getImageUrl('test.png')

// 正常图标
const normal = ref(getImageUrl('normal.png'))
// 预警图标
const warning = ref(getImageUrl('warning.png'))


// 城市数据
const dataList = ref([])

// 绘制中国地图
const chinaEcharts = () => {
  const myChart = echarts.init(document.getElementById('map'))

  echarts.registerMap('china', china)

  const option = {
    // 地理坐标系组件用于地图的绘制
    geo: [
      // 增加叠层
      {
        // 使用 registerMap 注册的地图名称。
        map: 'china',
        top: '10.6%',
        roam: false,
        zoom: 1.16,
        itemStyle: {
          // 地图区域的颜色
          areaColor: '#1873A8', // 绿色
          // 图形的描边颜色
          borderColor: '#1873A8' // 蓝色
        },
        regions: [
          {
            // 隐藏南海诸岛,因为顶层已经添加过了
            name: '南海诸岛',
            itemStyle: {
              normal: {
                opacity: 0 // 为 0 时不绘制该图形
              }
            },
            label: {
              show: false
            }
          }
        ]
      }
    ],
    series: [
      {
        type: 'map',
        map: 'china',
        layoutSize: '100%',
        top: '10%',
        z: 5,
        zlevel: 5,
        roam: false,
        zoom: 1.16,
        offset: [100, 100],
        // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
        label: {
          show: false,
          color: '#666666'
        },

        // 地图区域的多边形 图形样式。
        itemStyle: {
          // 地图区域的颜色
          areaColor: '#03639D', // 绿色
          // 图形的描边颜色
          borderColor: '#2979ff' // 蓝色
        }
      },

      {
        type: 'scatter',
        coordinateSystem: 'geo',
        z: 9,
        zlevel: 9,
        roam: false,
        offset: [100, 100],
        data: dataList.value,
        symbolSize: [14, 14],
        symbol: function (value, param) {
          if (param.data.type === '正常') {
            return `image://${normal.value}`
          }
          if (param.data.type === '预警') {
            return `image://${warning.value}`
          }
        }
      }
    ]
  }
  myChart.setOption(option, true)

  window.addEventListener('resize', function () {
    myChart.resize()
  })
}


const getList = async () => {
  // 城市名称数组
  let cityName = []
  for (let i = 0; i < cityArr.length; i++) {
    cityName.push(cityArr[i].name)
  }

  let { data } = await getRegionalInfo({
    params: cityName
  })


  // 组装数据
  let arr = []

  for (let regionalKey in data.data.regional) {
    let obj = {}
    obj.name = regionalKey
    obj.state = data.data.regional[regionalKey].state
    arr.push(obj)
  }

  let newArr = []
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < cityArr.length; j++) {
      let obj = {}
      if (arr[i].name === cityArr[j].name) {
        obj.name = cityArr[j].name
        obj.state = arr[i].state
        obj.latitude = cityArr[j].latitude
        obj.longitude = cityArr[j].longitude
        newArr.push(obj)
      }
    }
  }

  // 组装echarts格式的数据
  let echartsArr = []
  for (let i = 0; i < newArr.length; i++) {
    let obj ={
      value: [newArr[i].longitude, newArr[i].latitude],
      type: newArr[i].state,
      name: newArr[i].name
    }
    echartsArr.push(obj)

  }

  dataList.value = echartsArr


  chinaEcharts()
}

getList()
</script>
<style scoped lang="scss">
#map {
  width: 100%;
  height: 2.96875rem /* 570/192 */;
}
</style>
